<template>
    <AppTitle title="修改密码"></AppTitle>
    <div class="editBox">
        <el-form
            :model="formData"
            :rules="rules"
            label-width="120px"
            style="max-width: 600px"
            ref="ruleFormRef"
        >
            <el-form-item label="原密码" prop="oldPwd">
                <el-input 
                    v-model="formData.oldPwd"
                    type="password"
                    style="width: 240px;"
                />
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input 
                    v-model="formData.newPwd"
                    type="password"
                    style="width: 240px;"
                />
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPwd2">
                <el-input 
                    v-model="formData.newPwd2"
                    type="password"
                    style="width: 240px;"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import AppTitle from '@/components/title/AppTitle.vue';
    import { reactive } from 'vue';

    const formData = reactive({
        oldPwd: '',
        newPwd: '',
        newPwd2: '',
    })
    const submitForm = () => {
        console.log(formData);
    }
    const rules = reactive({
        oldPwd: [
            {required:true,message:'请输入老密码',trigger:'blur'},
            {min:3,max:10,message:'密码长度在3-10之间',trigger:'blur'},
        ],
        newPwd: [
            {required:true,message:'请输入新密码',trigger:'blur'},
            {min:3,max:10,message:'密码长度在3-10之间',trigger:'blur'},
        ],
        newPwd2: [
            {required:true,message:'请再次输入新密码',trigger:'blur'},
            {min:3,max:10,message:'密码长度在3-10之间',trigger:'blur'},
            {validator:(rule,value,cb)=>{
                if(value !== formData.newPwd){
                    cb(new Error('两次密码不一致'))
                }else{
                    cb()
                }
            },trigger:'blur'},
        ],
    })
</script>

<style lang="scss" scoped>
    .editBox{
        width: 100%;
        padding: 20px 20px 0;
        
    }
</style>